<template>
  <div id="index">
    <div class="nav">
      <div class="item" style="font-size: 0">
        <img src="../assets/index/logo.png" alt="" class="logo">
      </div>
      <img src="../assets/index/border.png" alt="" class="border">
      <router-link class="item link" to="/">答题</router-link>
      <img src="../assets/index/border.png" alt="" class="border">
      <router-link class="item link" to="/rank">排行榜</router-link>
      <img src="../assets/index/border.png" alt="" class="border">
      <Avatar />
    </div>
    <div>
      <router-view/>
    </div>
  </div>

</template>

<script>
import Avatar from '../components/Avatar';

export default {
  name: 'Index',

  data() {
    return {
    };
  },
  components: {
    Avatar
  },
  created() {
  },
  methods: {
    navigatorTo(path) {
      this.$router.push({name: 'Category'})
    },
  },
};
</script>

<style scoped>
#index {
  height: 100vh;
  width: 100%;
}

.nav {
  color: #fff;
  width: 100%;
  background: url("../assets/index/nav.png") 0 0 / 100% 100%;
  position: relative;
  z-index: 9;
}

.nav * {
  vertical-align: middle;
  user-select: none;
}

.border {
  height: 3.5vw;
}

.link {
  padding: 1.6vw 4.5vw !important;
  color: #a7b6fd;
  font-weight: normal;
  font-stretch: normal;
  cursor: pointer;
  transition: text-shadow .2s ease-in-out;
  font-size: 1.5vw;
}

.link:hover {
  text-shadow: 0 0 20px #ffffff;
  text-decoration: none;
}

.nav .item {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.logo {
  height: 4vw;
  padding: 0 1.5vw;
}

</style>
